<template>
  <el-form ref="form" label-width="100px">
    <el-form-item label="SPU名称"> {{ spu.spuName }} </el-form-item>
    <el-form-item label="SKU名称">
      <el-input placeholder="SKU名称" v-model="SkuName"></el-input>
    </el-form-item>
    <el-form-item label="价格(元)">
      <el-input placeholder="价格(元)" v-model="SkuPrice"></el-input>
    </el-form-item>
    <el-form-item label="重量(千克)">
      <el-input placeholder="重量(千克)" v-model="weight"></el-input>
    </el-form-item>
    <el-form-item label="规格描述">
      <el-input
        placeholder="规格描述"
        type="textarea"
        rows="4"
        v-model="info"
      ></el-input>
    </el-form-item>
    <el-form-item label="平台属性">
      <el-form :inline="true" label-width="100px">
        <el-form-item
          :label="attr.attrName"
          v-for="(attr, index) in attrInfoList"
          :key="attr.id"
        >
          <el-select placeholder="请选择" v-model="attr.attrIdValueId">
            <el-option
              v-for="(item, index) in attr.attrValueList"
              :key="item.id"
              :label="item.valueName"
              :value="`${attr.id}:${item.id}`"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>

    <el-form-item label="销售属性">
      <el-form :inline="true" label-width="100px">
        <el-form-item
          :label="SaleAttr.saleAttrName"
          v-for="(SaleAttr, index) in SaleAttrList"
          :key="SaleAttr.id"
        >
          <el-select placeholder="请选择" v-model="SaleAttr.saleAttrIdValueId">
            <el-option
              :value="`${SaleAttr.id}:${SaleAttrVal.id}`"
              :label="SaleAttrVal.saleAttrValueName"
              :key="SaleAttrVal.id"
              v-for="(SaleAttrVal, index) in SaleAttr.spuSaleAttrValueList"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>

    <el-form-item label="图片列表">
      <!-- :data="data" -->
      <el-table border style="width: 100%" :data="imglist">
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column prop="prop" label="图片" width="width">
          <template v-slot="{ row, $index }">
            <img :src="row.imgUrl" alt="" style="width: 100px; height: 100px" />
          </template>
        </el-table-column>
        <el-table-column prop="imgName" label="名称" width="width">
        </el-table-column>
        <el-table-column prop="prop" label="操作" width="width">
          <template v-slot="{ row, $index }">
            <!-- @click="changeDefault(spuImageList, row)" -->
            <el-button v-if="row.isDefault === '0'" type="primary" size="mini"
              >设为默认</el-button
            >
            <el-tag v-else type="success">默认</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>

    <el-form-item>
      <el-button type="primary">保存</el-button>
      <el-button @click="back">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "SkuForm",
  data() {
    return {
      //平台属性
      attrInfoList: [],
      //销售属性
      SaleAttrList: [],
      //SKU名称
      SkuName: "",
      //价格
      SkuPrice: "",
      //重量
      weight: "",
      //规格描述
      info: "",
      //spu数据
      spu: "",
      //图片数据
      imglist: [],
    };
  },
  methods: {
    back() {
      this.$emit("update:visible", false);
      /* Object.assign(this._data, this.$options.data()); */
    },
    async getinitdata(row, idList) {
      const re1 = await this.$api.attr.attrInfoList(
        idList.category1Id,
        idList.category2Id,
        idList.category3Id
      );
      this.attrInfoList = re1.data;
      this.spu = row;
      console.log("row", "idList", row, idList);

      const re2 = await this.$api.sku.getSpuSaleAttrList(row.id);
      this.SaleAttrList = re2.data;
      console.log(re2.data);

      const re3 = await this.$api.sku.getSpuImageList(row.id);
      re3.data.forEach((item) => {
        return (item.isDefault = "0");
      });
      this.imglist = re3.data;
    },
  },
};
</script>

<style>
</style>